<template>
  <div>
    <div v-if="$route.meta.show">
      <base-panel>
        <el-form
          :inline="true"
          :model="listQ"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="标题:">
            <el-input
              v-model="listQ.title"
              placeholder="请输入标题"
              clearable
              @keyup.enter.native="search"
            ></el-input>
          </el-form-item>
          <el-form-item label="工单类型:">
            <el-select
              v-model="listQ.workflow_ids"
              filterable
              placeholder="请选择工单类型"
            >
              <el-option
                v-for="item in workOrderTLt"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建人:">
            <el-input
              v-model="listQ.creator"
              placeholder="请输入创建人"
              clearable
              @keyup.enter.native="search"
            ></el-input>
          </el-form-item>
          <el-form-item label="受理单号:">
            <el-input
              v-model="listQ.sn"
              placeholder="请输入受理单号"
              clearable
              @keyup.enter.native="search"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="LQTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="list" stripe v-loading="loading" size="small">
          <el-table-column align="left" type="index" label="序号" min-width="60">
            <template slot-scope="scope">
             {{(listQ.page-1)*listQ.per_page+scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column align="left" prop="sn" label="受理单号" width="160"/>
          <el-table-column
            align="left"
            prop="title"
            label="标题"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
            <my-link @to="examine(row)">{{row.title}}</my-link>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="workflow_info.workflow_name"
            label="类型"
          />
          <el-table-column
            align="left"
            label="当前状态"
            prop="act_state_id"
            :formatter="stateFormatter"
          />
          <el-table-column
            align="left"
            prop="creator"
            label="创建人"
            width="130"
          />
          <el-table-column
            align="left"
            prop="gmt_created"
            label="创建时间"
            width="200"
          />
          <el-table-column
            align="left"
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="{ row }">
              <detail-button @click="examine(row)"></detail-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="count > 0"
          :total="count"
          :page.sync="listQ.page"
          :limit.sync="listQ.per_page"
          @pagination="getList"
        />
      </base-panel>
    </div>
    <router-view > </router-view>
  </div>
</template>
<script>
import api from "@/api/index";
import { getStateInfo } from "@/utils/common";
import MyLink from "../../components/MyLink/index";
export default {
  components: {MyLink},
  data() {
    return {
      workOrderTLt: [],
      newType: "",
      list: [],
      listQ: {
        category: undefined,
        page: 1,
        per_page: 10
      },
      count: 0,
      LQTime: [],
      operationStatus: "",
      dialogVisible: false,

      // 组件参数
      formList: [],
      ORecordList: [],
      reverse: true,
      activeNames: [],
      active: 0, // 步骤条
      value: {},
      rules: {},
      userList: [],
      fileList: [],
      isLAM: false,
      LAMValue: "",
      id: 0,
      loading: false
    };
  },
  computed:{
    category(){
      let lastIndex = this.$route.path.lastIndexOf("/")
      //console.log("-----------lastIndex",lastIndex)
      //console.log('----------this.$route.path.substring(lastIndex)',this.$route.path.substring(lastIndex))
      return this.$route.path.substring(lastIndex).replace("/", "")
    }
  },
  created() {
    this.listQ.category = this.category
  },
  mounted() {
    if (this.$route.meta.show) {
      this.getWOType();
      this.getList();
      this.getUserList();
    }
  },
  methods: {
    stateFormatter(row) {
      return getStateInfo(row.act_state_id);
    },
    // 详情
    examine(row) {
      this.$router.push({
        path: `workDetail`,
        query:{id:row.id}
      });
    },
    // 搜索
    search() {
      this.listQ.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.listQ = {
        category: this.category,
        page: 1,
        per_page: 10
      };
      this.getList();
    },

    // 获取工单类型列表
    getWOType() {
      api.getWorkflows().then(res => {
        this.workOrderTLt = res.data.value;
      });
    },
    /** 组件事件 */
    // 折叠面板点击
    handleChange() {
      //console.log(this.activeNames);
    },
    // 获取用户列表数据
    getUserList() {
      api.getAllSimpleUser().then(res => {
        this.userList = res.data.value;
      });
    },
    // 文件超出个数限制时的钩子
    handleExceed() {
      this.$message.warning("只能上传单个文件");
    },
    // 获取我的待办列表
    getList() {
      if (this.LQTime?.length > 0) {
        this.listQ.create_start = this.LQTime[0];
        this.listQ.create_end = this.LQTime[1];
      } else {
        delete this.listQ.create_start;
        delete this.listQ.create_end;
      }
      this.loading = true;
      api.getMyBacklogList(this.listQ).then(res => {
          this.list = res.data.value;
          this.count = res.data.total;
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar-thumb:hover {
  /*滚动条的hover样式*/
  height: 50px;
  background-color: #9f9f9f;
}

.body {
  margin: 25px;
  background: #fff;
}

.SCriteria {
  display: flex;
  flex-wrap: wrap;

  > div {
    width: 23%;
    line-height: 36px;
    display: flex;
    margin: 0 2% 10px 0;

    > span {
      max-width: 80px;
      box-sizing: border-box;
      padding-right: 5px;
    }

    .el-input,
    .el-select,
    .el-date-editor {
      width: calc(100% - 80px);
    }
  }
}

.btns {
  text-align: right;
}
</style>
